<template>
  <div class="main-container">
    <layout class="no-padding h-75vh">
      <template slot="search">
        <!-- 面包屑 -->
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>生产派工管理</el-breadcrumb-item>
            <el-breadcrumb-item>返修派工</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 查询表单 -->
        <el-form inline :model="formSearch">
          <div class="search-left">
            <el-form-item>
              <el-input v-model="formSearch.dispatchFormNumber" class="w150" placeholder="派工单号" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formSearch.processName" class="w150" placeholder="返修工序" clearable> </el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="formSearch.state" class="w150" placeholder="状态" filterable clearable>
                <template v-for="item in stateList">
                  <el-option :label="item" :value="item" :key="item"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-button @click="clear()">清空</el-button>
            <el-button type="primary" @click="submit()">查询</el-button>
          </div>
        </el-form>
      </template>

      <!-- 返修数据表格 -->
      <template slot="content">
        <el-table border stripe :data="thirdData" row-key="id" @row-dblclick="distribute">
          <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
          <el-table-column prop="dispatchFormNumber" sortable label="派工单号" align="center" width="150"></el-table-column>
          <el-table-column prop="processName" label="返修工序" align="center" width="120"></el-table-column>
          <el-table-column prop="number" label="返修数量" align="center" width="120"></el-table-column>
          <el-table-column prop="drawingNumber" label="图号" align="center" width="150"></el-table-column>
          <el-table-column prop="productName" label="品名" align="center" width="150"></el-table-column>
          <el-table-column prop="materialQuality" label="材质" align="center" width="150"></el-table-column>
          <el-table-column prop="producingState" label="状态" align="center" width="120"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center" min-width="120"></el-table-column>
          <el-table-column v-if="$checkAuth(['dispatchCreate'])" label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button @click="distribute(scope.row)" type="text" icon="el-icon-s-order" size="small" :disabled="!dispatchState.includes(scope.row.producingState)">派工</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </layout>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'

const vuexEnter = namespace('TwoEnter')
const vuexDispatchDetail = namespace('DispatchDetail')
@Component({
  components: {
    Layout
  }
})
export default class Index extends Vue {
  @vuexDispatchDetail.State producingId
  @vuexDispatchDetail.Mutation setProducingId
  @vuexEnter.State thirdData: any
  @vuexEnter.Action GET_REWORK_LIST: any

  formSearch: any = {
    dispatchFormNumber: '',
    processName: '',
    state: '待派工',
    page: 1,
    pageSize: 20
  }
  stateList: String[] = ['工艺设计', '工艺审批', '待派工', '生产中', '已完成', '工艺变更设计', '工艺变更审批']
  dispatchState: string[] = ['待派工', '生产中']

  /**
   * 生命周期函数
   */
  created() {
    let from = this.$route.params.from
    if (from == 're-dispatch') {
      this.formSearch.dispatchFormNumber = this.$route.params.dispatchFormNumber
      this.formSearch.processName = this.$route.params.processName
      this.formSearch.state = ''
    }
    this.GET_REWORK_LIST({ ...this.formSearch })
  }

  /**
   * 重置按钮事件
   */
  clear() {
    this.formSearch = {
      dispatchFormNumber: '',
      processName: '',
      state: '生产中',
      page: 1,
      pageSize: 20
    }
  }

  /**
   * 查询按钮事件
   */
  submit() {
    this.GET_REWORK_LIST({ ...this.formSearch })
  }

  /**
   * 派工
   */
  distribute(row) {
    this.setProducingId(row.producingId)
    this.$router.push({
      name: 'dispatch-details',
      params: {
        from: 'repair'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.order {
  // float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;
  border-radius: 15px;

  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}
.s1 {
  display: none;
  height: '100%';
}
//通知单滚动
//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}
.breadcrumb {
  height: 25px;
  width: 100%;
  border: none;
}
.notice-item {
  height: 270px;
}

/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}
.layout .operation {
  overflow-x: auto;
}

.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>
